<template>
  <div class="Box_bj">
    <div class="vip-container">
      <!-- Header Section -->
      <div class="header">
        <div class="header-content">
          <h1>VIP会员</h1>
          <p class="subtitle">畅读海量小说，尊享专属特权</p>
        </div>
      </div>

      <!-- VIP Benefits -->
      <div class="benefits-section">
        <div class="benefit-item">
          <i class="iconfont icon-download"></i>
          <h3>新人优惠</h3>
          <p>新人最低3.5折</p>
        </div>
        <div class="benefit-item">
          <i class="iconfont icon-ad"></i>
          <h3>无广告</h3>
          <p>纯净阅读体验</p>
        </div>
        <div class="benefit-item">
          <i class="iconfont icon-update"></i>
          <h3>优先更新</h3>
          <p>抢先看最新章节</p>
        </div>
        <div class="benefit-item">
          <i class="iconfont icon-vip"></i>
          <h3>专属标识</h3>
          <p>尊贵VIP标识</p>
        </div>
      </div>

      <!-- Special Offer Banner -->
      <div class="special-offer">
        <div class="offer-content">
          <div class="offer-text">
            <h2>限时特惠</h2>
            <p>新用户首月仅需9.9元</p>
            <span class="countdown">剩余时间: 24小时</span>
          </div>
          <button class="offer-btn" @click="Xianshi(9.9)">立即开通</button>
        </div>
      </div>

      <!-- VIP Packages -->
      <div class="packages-section">
        <h2>会员套餐</h2>
        <div class="packages-grid">
          <div class="package-card" v-for="(pkg, index) in packages" :key="index">
            <div class="package-header">
              <h3>{{ pkg.name }}</h3>
              <div class="price">
                <span class="amount">¥{{ pkg.price }}</span>
                <span class="period">/{{ pkg.period }}</span>
              </div>
              <div class="original-price" v-if="pkg.originalPrice">原价: ¥{{ pkg.originalPrice }}</div>
              <div class="discount-tag" v-if="pkg.discount">{{ pkg.discount }}折</div>
            </div>
            <div class="package-features">
              <ul>
                <li v-for="(feature, fIndex) in pkg.features" :key="fIndex">
                  <i class="iconfont icon-check"></i>
                  {{ feature }}
                </li>
              </ul>
            </div>
            <button class="purchase-btn" @click="purchasePackage(pkg)">
              立即开通
            </button>
          </div>
        </div>
      </div>

      <!-- VIP Privileges -->
      <div class="privileges-section">
        <h2>会员特权</h2>
        <div class="privileges-grid">
          <div class="privilege-card" v-for="(privilege, index) in privileges" :key="index">
            <div class="privilege-icon">
              <img :src="privilege.icon" alt="" :style="index==2?'width:25px;height:25px;':''">
            </div>
            <div class="privilege-content">
              <h3>{{ privilege.title }}</h3>
              <p>{{ privilege.description }}</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Payment Methods -->
      <div class="payment-section">
        <h2>支付方式</h2>
        <div class="payment-methods">
          <div class="payment-method" v-for="(method, index) in paymentMethods" :key="index">
            <img :src="method.icon" :alt="method.name">
            <span>{{ method.name }}</span>
          </div>
        </div>
      </div>

      <!-- FAQ Section -->
      <div class="faq-section">
        <h2>常见问题</h2>
        <div class="faq-list">
          <div class="faq-item" v-for="(faq, index) in faqs" :key="index">
            <div class="faq-question" @click="toggleFaq(index)">
              <h3>{{ faq.question }}</h3>
              <i class="iconfont" :class="faq.isOpen ? 'icon-up' : 'icon-down'"></i>
            </div>
            <div class="faq-answer" v-show="faq.isOpen">
              <p>{{ faq.answer }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      packages: [
        {
          name: '月度会员',
          price: '15',
          period: '月',
          originalPrice: '30',
          discount: '5',
          features: [
            '无广告阅读',
            '优先更新',
            '阅读时长奖励',
            '专属头像框',
            '专属活动优先参与'
          ],
          isPopular: false
        },
        {
          name: '季度会员',
          price: '38',
          period: '季',
          originalPrice: '90',
          discount: '4.2',
          features: [
            '无广告阅读',
            '优先更新',
            '阅读时长奖励',
            '专属头像框',
            '专属活动优先参与'
          ],
          isPopular: true
        },
        {
          name: '年度会员',
          price: '128',
          period: '年',
          originalPrice: '360',
          discount: '3.5',
          features: [
            '无广告阅读',
            '优先更新',
            '专属头像框',
            '阅读时长奖励',
            '专属活动优先参与'
          ],
          isPopular: false
        }
      ],
      privileges: [
        {
          icon: require('@/assets/image/award.png'),
          title: '尊贵标识',
          description: '专属VIP标识，彰显尊贵身份'
        },
        {
          icon: require('@/assets/image/2231635745297.png'),
          title: '生日特权',
          description: '生日当月送专属礼包'
        },
        {
          icon: require('@/assets/image/youxian.png'),
          title: '活动优先',
          description: '优先参与平台活动'
        },
      ],
      paymentMethods: [
        { name: '微信支付', icon: require('@/assets/image/wx.png') }
      ],
      faqs: [
        {
          question: 'VIP会员有哪些特权？',
          answer: 'VIP会员可以免费阅读平台所有小说，享受无广告阅读体验，支持离线下载，优先获取最新章节更新，以及专属客服服务等特权。',
          isOpen: false
        },
        {
          question: '如何开通VIP会员？',
          answer: '您可以选择月度、季度或年度会员套餐，选择支付方式后即可开通。开通后立即生效，可以立即享受所有VIP特权。',
          isOpen: false
        },
        {
          question: 'VIP会员可以退款吗？',
          answer: 'VIP会员开通后不支持退款，请谨慎选择会员时长。如遇特殊情况，请联系客服处理。',
          isOpen: false
        },
        {
          question: 'VIP会员到期后会自动续费吗？',
          answer: '不会自动续费。会员到期后，您需要手动续费才能继续享受VIP特权。',
          isOpen: false
        },
        {
          question: 'VIP会员可以同时登录多个设备吗？',
          answer: 'VIP会员最多支持3个设备同时登录，超过限制将自动下线最早登录的设备。',
          isOpen: false
        }
      ]
    }
  },
  methods: {
    toggleFaq(index) {
      this.faqs[index].isOpen = !this.faqs[index].isOpen;
    },
    //支付
    purchasePackage(pkg) {
      if(this.$store.state.dlBoole!==''){
        // 处理购买逻辑
        console.log(`购买套餐: ${pkg.price}`);
        // window.location.href = `https://bingshi.qifu100.cn/index/index/wxpay?price=${pkg.price}`;
        window.open('https://bingshi.qifu100.cn/index/index/wxpay?price=' + pkg.price, '_blank');
        // 这里可以添加实际的购买逻辑，比如调用支付接口等
      }else{
        this.$message({
          message: '请先登录',
          type: 'warning'
        });
      }
      
    },
    // 限时特惠
    Xianshi(price) {
      if(this.$store.state.dlBoole!==''){
        window.open('https://bingshi.qifu100.cn/index/index/wxpay?price=' +price, '_blank');
        // 这里可以添加实际的购买逻辑，比如调用支付接口等
      }else{
        this.$message({
          message: '请先登录',
          type: 'warning'
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.Box_bj {
  width: 100%;
  
  min-height: 100vh;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #f0faff, #fff9f9);
}

.vip-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.header {
  text-align: center;
  margin-bottom: 40px;

  .header-content {
    h1 {
      font-size: 36px;
      color: #333;
      margin-bottom: 10px;
    }

    .subtitle {
      font-size: 18px;
      color: #666;
    }
  }
}

.benefits-section {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .benefit-item {
    text-align: center;
    flex: 1;
    padding: 0 20px;

    i {
      font-size: 40px;
      color: #b63228;
      margin-bottom: 15px;
    }

    h3 {
      font-size: 18px;
      color: #333;
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      color: #666;
    }
  }
}

.special-offer {
  background: linear-gradient(45deg, #b63228, #ff6b6b);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
  color: #fff;

  .offer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .offer-text {
      h2 {
        font-size: 24px;
        margin-bottom: 8px;
      }

      p {
        font-size: 18px;
        margin-bottom: 8px;
      }

      .countdown {
        font-size: 14px;
        opacity: 0.8;
      }
    }

    .offer-btn {
      background: #fff;
      color: #b63228;
      border: none;
      padding: 12px 30px;
      border-radius: 25px;
      font-size: 16px;
      font-weight: bold;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

.packages-section {
  margin-bottom: 60px;

  h2 {
    text-align: center;
    font-size: 28px;
    color: #333;
    margin-bottom:30px;
  }

  .packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .package-card {
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 2px solid #ffffff;
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      border: 2px solid #b63228;
    }

    &.popular {
      border: 2px solid #b63228;

      &::before {
        content: '最受欢迎';
        position: absolute;
        top: 20px;
        right: -35px;
        background: #b63228;
        color: #fff;
        padding: 5px 40px;
        transform: rotate(45deg);
        font-size: 12px;
      }
    }

    .package-header {
      text-align: center;
      margin-bottom: 20px;

      h3 {
        font-size: 24px;
        color: #333;
        margin-bottom: 15px;
      }

      .price {
        margin-bottom: 10px;

        .amount {
          font-size: 36px;
          color: #b63228;
          font-weight: bold;
        }

        .period {
          font-size: 16px;
          color: #666;
        }
      }

      .original-price {
        font-size: 14px;
        color: #999;
        text-decoration: line-through;
      }

      .discount-tag {
        font-size: 14px;
        color: #fff;
        background: #b63228;
        padding: 2px 10px;
        border-radius: 4px;
        margin-top: 10px;
      }
    }

    .package-features {
      margin-bottom: 25px;

      ul {
        list-style: none;
        padding: 0;

        li {
          display: flex;
          align-items: center;
          margin-bottom: 12px;
          font-size: 14px;
          color: #666;

          i {
            color: #b63228;
            margin-right: 8px;
          }
        }
      }
    }

    .purchase-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #f0f0f0;
      color: #666;

      &:hover {
        background: #b63228;
        color: #fff;
      }

      &.popular {
        background: #b63228;
        color: #fff;

        &:hover {
          background: #a12a22;
        }
      }
    }
  }
}

.privileges-section {
  margin-bottom: 40px;

  h2 {
    text-align: center;
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
  }

  .privileges-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .privilege-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .privilege-icon {
      width: 50px;
      height: 50px;
      background: #fff9f9;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      cursor: pointer;
      img{
        width: 35px;
        height: 35px;
      }
    }

    .privilege-content {
      flex: 1;

      h3 {
        font-size: 16px;
        color: #333;
        margin-bottom: 5px;
      }

      p {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }
  }
}

.promo-banner {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .promo-content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .promo-text {
      h3 {
        font-size: 20px;
        color: #333;
        margin-bottom: 8px;
      }

      p {
        font-size: 16px;
        color: #b63228;
        margin: 0;
      }
    }

    .promo-image {
      width: 100px;
      height: 100px;
      object-fit: cover;
      border-radius: 8px;
    }
  }
}

.support-section {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  margin-top: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .support-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    i {
      font-size: 40px;
      color: #b63228;
    }

    .support-text {
      text-align: center;

      h3 {
        font-size: 18px;
        color: #333;
        margin-bottom: 5px;
      }

      p {
        font-size: 14px;
        color: #666;
        margin: 0;
      }
    }

    .contact-btn {
      background: #b63228;
      color: #fff;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        background: #a12a22;
      }
    }
  }
}

.payment-section {
  margin-bottom: 60px;
  text-align: center;

  h2 {
    font-size: 28px;
    color: #333;
    margin-bottom: 20px;
  }

  .payment-methods {
    display: flex;
    justify-content: center;
    gap: 30px;

    .payment-method {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }

      img {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
      }

      span {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.faq-section {
  h2 {
    text-align: center;
    font-size: 28px;
    color: #333;
    margin-bottom: 30px;
  }

  .faq-list {
    margin: 0 auto;
  }

  .faq-item {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .faq-question {
      padding: 20px;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        font-size: 16px;
        color: #333;
        margin: 0;
      }

      i {
        color: #999;
        transition: transform 0.3s ease;
      }
    }

    .faq-answer {
      padding: 0 20px 20px;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .benefits-section {
    flex-wrap: wrap;
    gap: 20px;

    .benefit-item {
      flex: 0 0 calc(50% - 10px);
    }
  }

  .packages-grid {
    grid-template-columns: 1fr !important;
  }

  .payment-methods {
    flex-wrap: wrap;
    gap: 20px !important;

    .payment-method {
      flex: 0 0 calc(33.33% - 14px);
    }
  }

  .privileges-grid {
    grid-template-columns: 1fr !important;
  }

  .special-offer .offer-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .promo-banner .promo-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .support-section .support-content {
    flex-direction: column;
    text-align: center;
  }
}
</style>
